<template>
	<view class="bg">
		<view class="container">
			<view class="head">
				<view class="head_img">
					<image :src="share_data.head_pic" mode="" class="head_img"></image>
				</view>
				<view class="user_share_text">
					<view class="user_share">叮咚！{{share_data.realname}}送您一份贴心礼物</view>
					<view class="share_desc">友谊的小船不会说翻就翻！</view>
				</view>
			</view>
			
			<view class="choice_gift">
				<view class="choice_title">
					<text>第一步：</text><text>挑选商品</text>
				</view>
				<!-- <scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation> -->
				<swiper autoplay interval='4000' circular class="gift_list">
					<!-- <view class="gift_list"> -->
						<!-- <view class="gift" v-for="(item, index) in gift_list" :key="index"  @click="choice(index)"> -->
							<swiper-item class="gift" v-for="(item, index) in gift_list" :key="index"  @click="choice(index, item.id)">
								<image :src="item.thumb" mode="" class="gift_img"></image>
								<view class="gift_title">{{item.goods_name}}</view>
								<image mode="" class="gift_choice" v-bind:class="[item.act == '1' ? 'gift_choice_act': '']"></image>
							</swiper-item>
						<!-- </view> -->
					<!-- </view> -->
				</swiper>
				<!-- </scroll-view> -->
			</view>
			<view class="choice_gift">
				<view class="choice_title second_step">
					<text>第二步：</text><text>挑选礼物</text>
				</view>
				<view class="gift_list">
					<!-- <view class="gift" v-for="(item, index) in gift_list" :key="index"  @click="choice(index)">
						<image :src="item.thumb" mode="" class="gift_img"></image>
						<view class="gift_title">{{item.goods_name}}</view>
						<image mode="" class="gift_choice" v-bind:class="[item.act == '1' ? 'gift_choice_act': '']"></image>
					</view> -->
				</view>
			</view>
			<view class="choice_gift_btn" @tap="showShare">
				<image src="../../../static/images/share/choice_gift_btn.png" mode=""></image>
			</view>
			<view class="share_notice">
				<view class="notice-head">
					<view class="notice_icon_l">
						<image src="../../../static/images/share/notice_icon_l.png" class="notice_icon" mode=""></image>
					</view>
					<view class="notice_icon_c">
						如何领礼物
					</view>
					<view class="notice_icon_r">
						<image src="../../../static/images/share/notice_icon_r.png" class="notice_icon" mode=""></image>
					</view>
				</view>
				<view class="notice_text">
					<view class="">1.选择分享的商品并分享给微信好友或者朋友圈;</view>					<view class="">2.好友通过分享链接参与拼抢获得对应的奖励; </view>					<view class="">3.分享同类产品至少3次后即可</view>				</view>
			</view>
		</view>
		
		<!-- 分享弹框 -->
		<view class="g-popup-share" :class="{zShow:isShowShare}">
			<view class="g-share-type">
				<button @tap="share('WXSceneSession')">
					<image src="../../../static/icons/wxpay.png" mode="widthFix"></image>
					<view>微信好友</view>
				</button>
				<button @tap="share('WXSenceTimeline')">
					<image src="../../../static/icons/weixin_friend.png" mode="widthFix"></image>
					<view>朋友圏</view>
				</button>
			</view>
			<button class="u-share-cancel" @tap="showToggle()">取消</button>
		</view>
		<view class="u-popup-mask" v-if="isShowMark" @tap="showToggle()"></view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>
<style>
	
</style>
<script>
	import jewel from '@/common/common_zb.js';
	export default{
		data() {
			return {
				gift_id: 0,
				gift_list: [],
				isShowShare: false,
				isShowMark: false,
				order_no: '',
				share_data: [],
				bIsShowLoading: false,
				share_goods_id: 0,
				present_goods_id: 0
			}
		},
		onLoad(data) {
			let that = this;
			that.bIsShowLoading = true;
			jewel.post('goods/searchGoods', {is_shangwu_zone: 1}, false, function(res) {
				that.gift_list = res.data.data;
			})
			jewel.post('order/get_share_present', {order_no: data.order_no}, false, function(res) {
				that.share_data = res.data.data;
				that.bIsShowLoading = false;
			})
			that.order_no = data.order_no;
		},
		methods: {
			choice(index, goods_id) {
				for (let i in this.gift_list) {
					this.gift_list[i].act = 0;
				}
				this.gift_list[index].act = 1;
				this.gift_id = this.gift_list[index].id;
				this.share_goods_id = goods_id;
			},
			showShare(){
				if(this.share_goods_id == 0) {
					return jewel.showToast('请先挑选商品');
				}
				if(this.present_goods_id == 0){
					return jewel.showToast('请挑选赠送的礼物');
				}
				this.isShowShare = true;
				this.isShowMark = true;
			},
			share(wx) {
				let that = this
				that.isShowLoading = true;
				var url = that.share_data.url + '&goods_id=' + that.share_goods_id + '&share_goods_id=' + that.share_goods_id + '&present_goods_id=' + that.present_goods_id;
				uni.share({
				    provider: 'weixin',
				    scene: wx,
				    type: 0,
				    href: url,
				    title: that.share_data.title,
				    summary: that.share_data.summary,
				    imageUrl: that.share_data.imageUrl,
				    success: function(res) {
						that.isShowLoading = false
					},
				    fail: function(err) {
						that.isShowLoading = false
					}
				});
				setTimeout(()=>{
					that.showToggle();
				},3000)
			},
			showToggle() {
				this.isShowMark = !this.isShowMark
				this.isShowShare = !this.isShowShare
			}
		}
	}
</script>

<style lang="scss" scoped>
	template{
		height: 100%;
	}
	.choice_gift_btn{
		width: 100%;
		height: 98rpx;
		text-align: center;
		padding-top: 38rpx;
		padding-bottom: 32rpx;
	}
	.choice_gift_btn image{
		width: 554rpx;
		height: 98rpx;
	}
	.share_notice{
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100%;
		height: 652rpx;
	}
	
	.bg{
		background-image: url() ;
		background-repeat: repeat-y;
		background-size: 100%;
		width: 100%;
		height: auto;
	}
	.container{
		width: 90%;
		height: 100%;
		margin: 0 auto;
	}
	.head{
		height: 66rpx;
		width: 100;
		padding-top: 29rpx;
	}
	.head_img{
		width: 66rpx;
		height: 66rpx;
		float: left;
		margin-right: 18rpx;
	}
	.user_share_text{
		float: left;
		color: #fff;
	}
	.user_share{
		font-size: 30rpx;
	}
	.share_desc{
		font-size: 22rpx;
	}
	.nav-bar{
		width: 100%;
		height: 100%;
		display: flex;
		white-space: nowrap;
	}
	.choice_gift{
		border: 2rpx solid #ffe2ad;
		border-radius: 8rpx;
		width: 100%;
		height: 268rpx;
		margin-top: 64rpx;
		background-color: #e6635a;
		position: relative;
	}
	.choice_title{
		font-size: 30rpx;
		color: #fff;
		position: absolute;
		height: 47rpx;
		width: 277rpx;
		line-height: 47rpx;
		text-align: center;
		background-color: #fca722;
		border-radius: 12rpx;
		top: -15px;
		left: 14rpx;
	}
	.gift_list{
		width: 578rpx;
		margin: 0 auto;
	}
	.gift{
		width: 33%!important;
		height: 160rpx;
		text-align: center;
		position: relative;
		padding-top: 65rpx;
		display: inline-block;
	}
	.gift_img{
		width: 110rpx;
		height: 110rpx;
		border: 1rpx solid #fff;
		border-radius: 60rpx;
	}
	.gift_title{
		font-size: 28rpx;
		color: #fff;
		width: 99%;
		height: 42rpx;
		text-align: center;
		overflow: hidden;
	}
	.gift_choice_act{
		content: url(../../../static/images/share/gift_choice_act.png) !important;
	}
	.gift_choice{
		content: url(../../../static/images/share/gift_choice.png);
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 135rpx;
		right: 40rpx;
	}
	.second_step{
		background-color: #e82222!important;
	}
	.notice-head{
		height: 35rpx;
		width: 100%;
		padding-top: 37rpx;
	}
	.notice-head view{
		width: 33%;
		text-align: center;
		float: left;
	}
	.notice_icon_l{
		text-align: right !important;
	}
	.notice_icon_r{
		text-align: left !important;
	}
	.notice_icon_c{
		font-size: 34rpx;
		color: #ce161b;
	}
	.notice_icon{
		width: 68rpx;
		height: 16rpx;
	}
	.notice_text{
		width: 80%;
		margin: 0 auto;
		font-size: 30rpx;
		color: #1a1a1a;
		clear: both;
		line-height: 50rpx;
		padding-top: 20rpx;
	}
	.g-popup-share {
	    position: fixed;
	    left: 0;
	    bottom: -100%;
	    width: 100%;
	    background: #fff;
	    z-index: 11;
		transform: translateY(100%);
		transition: .3s;
		.g-share-type {
		    display: flex;
		    padding: 15px 0;
			button {
			    flex: 1;
			    text-align: center;
			}
			image {
			    width: 75upx;
				height: 75upx;
			}
		}
		.u-share-cancel {
		    background: #a4a4a4;
		    padding: 10px 0;
		    color: #fff;
		
		}
		
	}
	
	.zShow {
		transform: translateY(0) !important;
		bottom: 0;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
</style>
